<template>
    <div>
        <el-button @click="handleClick('see')" type="text" size="small">查看</el-button>
        <el-button @click="handleClick('edit')" type="text" v-if="!notHaveEdit" size="small">编辑</el-button>
        <el-popover placement="bottom" width="50" trigger="hover">
            <div class="more-class">
                <el-button type="text" link v-for="(item,index) in attrs" @click="handleClick(item)" :key="index">
                    {{getItemStr(item)}}</el-button>
                <el-button type="text" link v-if="!attrs||attrs.length<=0" @click="handleClick('delete')"
                    slot="reference" size="small">删除
                </el-button>
            </div>
            <el-button style="margin-left:8px;" type="text" slot="reference" size="small">更多</el-button>
        </el-popover>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { MessageBox } from 'element-ui'
import { TouchType } from './data/ICommon';

export default Vue.extend({
    props: ['data', "attrs", "notHaveEdit",],
    methods: {
        getItemStr(t: string) {
            return this.$t(t);
        },
        handleClick(type: string) {
            let arr = type.split(".");
            let typeStr = arr.length > 1 ? arr[1] : arr[0];

            console.error("touch:", type, arr)

            if (typeStr == TouchType.DELETE) {
                MessageBox.confirm(
                    `确定要删除吗?`,
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    this.$emit('click-button', typeStr, this.data);
                })
                return;
            }
            this.$emit('click-button', typeStr, this.data);
        },
    }
})
</script>

<style lang="scss">
.more-class {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    justify-items: center;
}
</style>